<template>
  <div class="wq_test">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>水质管理</el-breadcrumb-item>
          <el-breadcrumb-item>化验方法</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="4">
        <el-button type="success" plain @click="addMethod" size="medium">添加化验方法</el-button>
      </el-col>
    </el-row>

    <el-dialog title="添加" :visible.sync="addDialogFormVisible" width="30%">
      <tabs-form
      :dataSource="dataSource"
      :tabIndex="tabIndex"
      :addtitle="addtitle"
      :editableTabsValue2="editableTabsValue2"
      @addTab="addTab"
      @tabclick="tabclick"
      @removeTab="removeTab">
      </tabs-form>

       <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="addMethodSubmit()" size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TabsForm from '@/components/Tabs/TabsForm'
export default {
  data () {
    return {
      dataSource: [],
      tabIndex: 1,
      editableTabsValue2: '1',
      addtitle: '添加化验代入公式',
      addDialogFormVisible: false
    }
  },
  components: {
    TabsForm
  },
  created () {
    this.initdataSource()
  },
  methods: {
    initdataSource () {
      this.dataSource = [{
        title: '化验方法',
        name: '1',
        isCloseable: false,
        content: 'tab-one',
        addMethodForm: {
          Way_Name: '',
          Formula: '',
          Memo: ''
        }
      }]
    },
    addMethod () {
      this.addDialogFormVisible = true
      this.initdataSource()
      this.editableTabsValue2 = '1'
      this.tabIndex = 1
    },
    addTab () {
      let newTabName = ++this.tabIndex + ''
      this.dataSource.push({
        title: `化验代入公式${this.dataSource.length}`,
        name: newTabName,
        isCloseable: true,
        content: 'tab-two',
        Method_Plug: {
          Group_Name: '',
          Plug_Formula_Type: '',
          Plug_Formula_Name: '',
          Plug_Formula: ''
        }
      })
      // this.editableTabsValue2 = newTabName
    },
    tabclick (targetName) {
      this.editableTabsValue2 = targetName
    },
    removeTab (targetName) {
      let tabs = this.dataSource
      let activeName = this.editableTabsValue2
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue2 = activeName
      this.dataSource = tabs.filter(tab => tab.name !== targetName)
      this.dataSource.forEach((tab, index) => {
        if (index !== 0) {
          tab.title = `化验代入公式${index}`
        }
      })
    },
    // 保存新建方法
    addMethodSubmit () {
      console.log(this.dataSource)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
